import { REG_PHONE } from '@renderer/constants/reg'
import { $t } from '@renderer/locales'
import { useCountDown, useLoading } from '@renderer/packages/hooks'
import { computed } from 'vue'

export function useCaptcha() {
  const { loading, startLoading, endLoading } = useLoading()
  const { count, start, stop, isCounting } = useCountDown(10)

  const label = computed(() => {
    let text = $t('page.login.codeLogin.getCode')

    const countingLabel = $t('page.login.codeLogin.reGetCode', { time: count.value })

    if (loading.value) {
      text = ''
    }

    if (isCounting.value) {
      text = countingLabel
    }

    return text
  })

  function isPhoneValid(phone: string) {
    if (phone.trim() === '') {
      window.$message?.error?.($t('form.phone.required'))

      return false
    }

    if (!REG_PHONE.test(phone)) {
      window.$message?.error?.($t('form.phone.invalid'))

      return false
    }

    return true
  }

  async function getCaptcha(phone: string) {
    const valid = isPhoneValid(phone)

    if (!valid || loading.value) {
      return
    }

    startLoading()

    // request
    await new Promise((resolve) => {
      setTimeout(resolve, 500)
    })

    window.$message?.success?.($t('page.login.codeLogin.sendCodeSuccess'))

    start()

    endLoading()
  }

  return {
    label,
    start,
    stop,
    isCounting,
    loading,
    getCaptcha
  }
}
